/* - Comment
 */
import QtQuick 2.0
import "../common"
import "../page"
import org.qtproject.znews_qt 1.0


Item {
    id: delegateArticle

    width: id_mainwindow.width;
    height: m_heightItem

    property int m_margin: 10 * ApplicationInfo.ratio

    property int m_widthImage: m_heightItem - 2* m_margin;
    property int m_heighImage: m_heightItem - 2* m_margin;

    property int m_cid: -1 // categoryId tuong ung
    property var m_articleId:  articleId;   // kieu long
    property string m_thumbnailImage: thumbnailImage;
    property string m_title: title;
    property string m_sourceArticle: sourceArticle;
    property string m_postTime: postTime;
    property real m_ratio : ApplicationInfo.ratio


    signal heightItemChange(int heightItem);
    onHeightChanged: {
        heightItemChange(delegateArticle.height)
    }

    opacity: 1

    Rectangle{
        anchors.fill: delegateArticle
        color: "#ffffff"
    }

    Line {color: "#000000"}

    Row {
        anchors.topMargin: m_margin
        anchors.leftMargin: m_margin
        anchors.bottomMargin: m_margin
        anchors.rightMargin: m_margin

        id: id_rowItem
        anchors.fill: delegateArticle
        spacing: m_margin

        Row {
            id: rowImage
            width: m_widthImage
            height: m_heighImage
            Image {
                id: id_ThumnailImage
                source: m_thumbnailImage
                height: m_widthImage
                width: m_heighImage

                visible: false

                onStatusChanged: {
                    if (id_ThumnailImage.status == Image.Ready) {
                        id_ThumnailImage.visible = true;
                        id_waitingImage.visible = false;
                    }
                }
            }

            WaitingImage {
                id: id_waitingImage
                width: m_widthImage
                height: m_heighImage

                visible: true;
            }
        }


        Column {
            spacing: m_margin

            Text {
                id: idTxtTitle
                text: m_title
                width: delegateArticle.width - id_ThumnailImage.width - 3 * m_margin
                font.family: "Arial"
                horizontalAlignment: Text.AlignJustify
                wrapMode: Text.WordWrap
                font.pixelSize: 20 * m_ratio;
            }

            Row {
                // spacing: 20
                Text {
                    text: m_sourceArticle
                    font.family: "Arial"
                    font.italic: true
                    verticalAlignment: Text.AlignBottom
                    opacity: 0.5
                    font.pixelSize: 18 * m_ratio
                }
                Text {
                    text: m_postTime
                    font.family: "Arial"
                    font.italic: true
                    verticalAlignment: Text.AlignBottom
                    opacity: 0.5
                    font.pixelSize: 18 * m_ratio
                }

            }
        }
    }

    Line { y: delegateArticle.height; color: "#000000"}


    MouseArea {
        anchors.fill: delegateArticle
        onClicked: {
            ApplicationInfo.onOpenContentArticleDetailRequest(m_cid, m_articleId);
            id_mainwindow.nextPage();
            console.log("ArticleDelegate.qml: UpdateArticle Content ArticleId: " + m_articleId);
        }
    }

}
